<template>
  <div class="music-player" v-if="visible" @click="closePanel">
    <div class="player-container" @click.stop>
      <div class="player-header">
        <h2>知我</h2>
        <p class="artist">国风堂 / 哦漏</p>
      </div>
      <div class="vinyl-record" :class="{ 'is-playing': store.isPlaying }" @click="handleRecordClick">
        <div class="record-grooves"></div>
        <div class="record-center">
          <div class="center-inner"></div>
        </div>
      </div>
      <div class="progress-container">
        <el-slider
          v-model="progress"
          :min="0"
          :max="100"
          :show-tooltip="false"
          @change="handleProgressChange"
          class="progress-slider"
        />
        <span class="time">{{ formatTime(store.currentTime) }} / {{ formatTime(store.duration) }}</span>
      </div>
      <div class="controls">
        <el-button class="control-btn" @click="togglePlay" :type="store.isPlaying ? 'danger' : 'primary'">
          <img
            v-if="!store.isPlaying"
            src="@/assets/播放图标-copy.png"
            alt="播放"
            style="width:28px;height:28px;"
          />
          <img
            v-else
            src="@/assets/暂停图标 (1)-copy.png"
            alt="暂停"
            style="width:28px;height:28px;"
          />
        </el-button>
        <el-slider
          v-model="store.volume"
          :min="0"
          :max="100"
          class="volume-slider"
          @change="handleVolumeChange"
        />
        <el-button class="control-btn" @click="closeMusic" type="danger">
          <el-icon :size="20"><Close /></el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useMusicPlayerStore } from '@/store/store'
import { Close } from '@element-plus/icons-vue'

const props = defineProps({ visible: Boolean })
const emit = defineEmits(['close'])
const store = useMusicPlayerStore()

const progress = computed({
  get: () => store.duration ? (store.currentTime / store.duration) * 100 : 0,
  set: val => {
    const newTime = (val / 100) * store.duration
    store.setCurrentTime(newTime)
  }
})

function togglePlay() {
  if (store.isPlaying) {
    store.pauseMusic()
  } else {
    store.playMusic()
  }
}
function handleVolumeChange(val) {
  store.setVolume(val)
}
function handleProgressChange(val) {
  progress.value = val
}
function closePanel() {
  emit('close')
}
function closeMusic() {
  store.stopMusic()
  emit('close')
}
function handleRecordClick() {
  if (store.isPlaying) {
    closePanel()
  } else {
    store.playMusic()
  }
}
function formatTime(seconds) {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.music-player {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.player-container {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  min-width: 320px;
  max-width: 360px;
}

.player-header {
  margin-bottom: 20px;
}

.player-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
  font-weight: 600;
}

.artist {
  color: #666;
  margin: 6px 0 0;
  font-size: 14px;
}

.vinyl-record {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(45deg, #000 0%, #333 100%);
  margin: 0 auto 20px;
  position: relative;
  transition: transform 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.vinyl-record.is-playing {
  animation: rotate 3s linear infinite;
}

.record-grooves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.1) 2px,
    rgba(255, 255, 255, 0.1) 4px
  );
}

.record-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  border: 8px solid #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.center-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
}

.progress-container {
  margin: 15px 0;
  position: relative;
  padding: 0 10px;
}

.progress-slider {
  margin: 0;
}

.time {
  position: absolute;
  right: 10px;
  top: -20px;
  font-size: 12px;
  color: #666;
}

.controls {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.control-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volume-slider {
  width: 80px;
  margin: 0 10px;
}

/* 自定义滑块样式 */
:deep(.el-slider__runway) {
  height: 4px;
  margin-bottom: 0;
}

:deep(.el-slider__bar) {
  background: linear-gradient(90deg, #409eff, #67c23a);
}

/* 暗色主题适配 */
:deep(.dark-theme) .player-container {
  background: rgba(35, 39, 46, 0.95);
}

:deep(.dark-theme) .player-header h2 {
  color: #eee;
}

:deep(.dark-theme) .artist {
  color: #aaa;
}

:deep(.dark-theme) .time {
  color: #aaa;
}

:deep(.dark-theme) .el-slider__runway {
  background-color: #444;
}

:deep(.dark-theme) .el-slider__bar {
  background: linear-gradient(90deg, #409eff, #67c23a);
}

:deep(.el-slider__button) {
  width: 10px;
  height: 10px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 